<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import axios from "axios";

const user = ref({})

const userToken = ref(localStorage.getItem("user-token") ?
    JSON.parse(localStorage.getItem("user-token")) : null);
const userId = ref(localStorage.getItem("user-id")?
    JSON.parse(localStorage.getItem("user-id")):null);

onMounted(() => {
  if (userToken.value == null) {
    alert("请先登录!");
    router.push("/patient/login");
    return;
  }
  axios.defaults.headers.common['Authorization']=userToken.value;
  axios.get(BASE_URL + '/v1/users/selectUser/' + userId.value).then((response) => {
    if (response.data.code === 20000) {
      user.value = response.data.data;
    }
  })
})
</script>

<template>
  <el-row>
    <div style="float: left;font-size: 25px;color: gray;font-weight: bold">我的信息</div>
  </el-row>
  <el-divider border-style="solid" style="margin: 10px 0"/>
  <el-card style="margin: 0 auto;width:1000px">
    <el-row class="rowI">
      <el-col :span="20">
        <el-row class="rowI">
          <el-col :span="12">
            <el-row>
              <el-col :span="10">
                <div class="divLeft">姓名 :</div>
              </el-col>
              <el-col :span="14">
                <el-input v-model="user.nickname" class="colInput" disabled/>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="2">
                <div class="divRight">性别 :</div>
              </el-col>
              <el-col :span="22">
                <el-select v-model="user.gender" class="colInputRight" placeholder="请选择" disabled/>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="rowI">
          <el-col :span="12">
            <el-row>
              <el-col :span="10">
                <div class="divLeft">手机号码 :</div>
              </el-col>
              <el-col :span="14">
                <el-input v-model="user.mobile" class="colInput" disabled/>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="2">
                <div class="divRight">年龄 :</div>
              </el-col>
              <el-col :span="22">
                <el-input v-model="user.age" class="colInputRight" disabled/>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="rowI">
          <el-col :span="12">
            <el-row>
              <el-col :span="10">
                <div class="divLeft">出生年月 :</div>
              </el-col>
              <el-col :span="14">
                <div style="margin-left: -80px">
                  <el-date-picker v-model="user.birthday" type="date" placeholder="请选择" format="YYYY/MM/DD"
                                  disabled/>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="2">
                <div class="divRight">民族 :</div>
              </el-col>
              <el-col :span="22">
                <el-select v-model="user.ethnicGroup" class="colInputRight" placeholder="请选择" disabled/>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="rowI">
          <el-col :span="12">
            <el-row>
              <el-col :span="10">
                <div class="divLeft">证件类型 :</div>
              </el-col>
              <el-col :span="14">
                <el-select v-model="user.documents" class="colInput" placeholder="请选择" disabled/>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="2">
                <div class="divRight">证件号码 :</div>
              </el-col>
              <el-col :span="22">
                <el-input v-model="user.idNumber" class="colInputRight" disabled/>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="rowI">
          <el-col :span="12">
            <el-row>
              <el-col :span="10">
                <div class="divLeft">是否有遗传病史 :</div>
              </el-col>
              <el-col :span="14">
                <el-select v-model="user.isGenetic" class="colInput" placeholder="请选择" disabled/>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="2">
                <div class="divRight">婚姻情况 :</div>
              </el-col>
              <el-col :span="22">
                <el-select v-model="user.maritalStatus" class="colInputRight" placeholder="请选择" disabled/>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="rowI">
          <el-col :span="4">
            <div class="textDiv">通讯地址 :</div>
          </el-col>
          <el-col :span="20">
            <el-input v-model="user.address" class="textInput" disabled/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="textDiv">备注 :</div>
          </el-col>
          <el-col :span="20">
            <el-input v-model="user.remark" type="textarea" :rows="4" class="textInput" disabled/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <div style="width: 234px;height: 300px;border: 1px solid gray;border-radius:5px;margin-left: -100px">
          <img v-if="user.imgUrl!=null&&user.imgUrl!==''" :src="BASE_URL+user.imgUrl"
               style="margin-top: 10px;border-radius: 5px;width: 214px;height: 280px"
               alt="人物头像"/>
          <img v-else style="margin-top: 10px;border-radius: 5px;width: 214px;height: 280px"
               src="https://demo2022.axureshop.com/2201312/images/%E6%82%A3%E8%80%85%E7%AE%A1%E7%90%86/u1990.svg"
               alt="人物头像"/>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped>
.colInput {
  margin-left: -80px;
  width: 220px
}

.colInputRight {
  margin-left: -80px;
  width: 200px
}

.rowI {
  margin-bottom: 20px
}

.textDiv {
  margin-left: 20px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}

.textInput {
  width: 545px;
  margin-left: -120px
}

.divLeft {
  margin-left: -10px;
  width: 130px;
  height: 30px;
  line-height: 30px;
  text-align: right
}

.divRight {
  margin-left: -15px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: right
}
</style>